<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车位列表</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

    <!--script动态绑定-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中目录</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">检测是否全选</button>

        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use('table', function () {
            let table = layui.table;
            table.render({
                elem: '#demo1',     //绑定元素
                url: 'findAllSpace', //数据接口
                id: 'tableId',
                method: "get",
                title: '用户数据表',          //表名
                toolbar: '#toolbarDemo',    //toolbar:'default'————layui的table默认表头工具栏右边有3个操作，分别是过滤字段、导出excel、打印功能
                totalRow: true,             //开启合计行
                page: true,                 //开启分页
                limit: 10,
                limits: [5, 10, 15, 20],
                cols: [
                    [
                        //添加选中行方法：在表头设置一个单选框或者复选框
                        {
                            type: 'checkbox',
                            fixed: 'left',
                        },
                        {
                            type: 'numbers',
                            title: '序号',
                            fixed: 'left',
                        },
                        // {
                        //     field: 'pid',
                        //     title: '车位编号',
                        //     sort: true
                        // },
                        {
                            field: 'floorNumber',
                            title: '层位数',
                            sort: true
                        },
                        {
                            field: 'areaCode',
                            title: '区号',
                            sort: true
                        },
                        {
                            field: 'parkingNumber',
                            title: '车位号',
                            sort: true
                        },
                        {
                            field: 'parkingStatus',
                            title: '状态',
                            sort: true
                        },
                        {
                            field: 'unitPrice',
                            title: '单价',
                            sort: true
                        },
                        {
                            field: 'createTime',
                            title: '创建时间',
                            sort: true
                        },
                        {
                            field: 'updateTime',
                            title: '更新时间',
                            sort: true
                        },
                        {
                            field: 'remark',
                            title: '备注',
                            sort: true
                        },
                        {
                            title: '操作',
                            align: 'center',    //表头单元格排列方式
                            toolbar: '#barDemo',
                        },
                    ]
                ]
            });
            //工具栏事件
            table.on('toolbar(demo1)', function (obj) {
                let checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        let data1 = checkStatus.data;
                        layer.alert(JSON.stringify(data1));
                        break;
                    case 'getCheckLength':
                        let data2 = checkStatus.data;
                        layer.msg('选中了' + data2.length + '个');
                        break;
                    case  'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
            })
        });
    </script>

    <script>
        //layui.user=()是layer弹出层的必要
        //layer提供了5种层类型,type可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        layui.use(['table', 'layer'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            //给添加车位的按钮绑定事件
            $("#addSpaces").click(function () {  //弹出层，弹出插入表单
                layer.open({
                    type: 2,
                    title: '添加车位',                 //弹框标题
                    content: 'jump?url=parking_space_add',      //iframe层，加载新页面
                    area: ['600px', '500px'],         //宽高
                    closeBtn: 1,                     //默认1，如果不显示为0，好看一点为2
                    shade: [0.5, 'green'],                      //默认是0.3透明度的黑色遮罩背景
                    //end层关闭后触发的回调
                    end: function () {
                        console.log("层关闭了。。。")
                        //table.reload(ID,options,deep)表格重载(自动化渲染的重载)
                        table.reload("tableId");
                    },
                });
            });
        });
    </script>

    <script>
        layui.use(['table', 'layer'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            //监听工具条事件
            //tool:工具条事件名，demo1是table原始容器的属性，
            table.on('tool(demo1)', function (obj) { //注：tool 是工具条事件名,demo1 是table原始容器的属性,lay-filter="对应的值"
                let data = obj.data;        //获得当前行数据
                let layEvent = obj.event;   //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                console.log(obj)
                // let tr = obj.tr;            //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') {      //删除
                    layer.confirm('确认要删除第' + data.pid + '条数据么？？？', {icon: 3, title: '提示'}, function (index) {
                        //getJSON中{}里写请求参数,function参数中d为后端删除后返回的数据
                        $.post("deleteSpace", {pid: data.pid}, function (d) {
                            if (d !== 1) {
                                alert("删除失败")
                            } else {
                                obj.del();              //删除当前行的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        });
                    });
                } else if (layEvent === 'edit') {     //编辑
                    // layer.alert('编辑行:<br>' + JSON.stringify(data))
                    //同步更新缓存对应的值
                    layer.open({
                        type: 2,
                        title: '修改车位',                 //弹框标题
                        content: 'jump?url=parking_space_edit' + data.pid,      //iframe层，加载新页面
                        area: ['600px', '500px'],         //宽高
                        closeBtn: 1,                     //默认1，如果不显示为0，好看一点为2
                        shade: [0.5, 'green'],                      //默认是0.3透明度的黑色遮罩背景
                        //end层关闭后触发的回调
                        end: function () {
                            //table.reload(ID,options,deep)表格重载(自动化渲染的重载)
                            table.reload("tableId");
                        },
                        //层弹出后的成功回调方法
                        // success: function (layero, index) {       //layero、index分别是当前层DOM、当前层索引
                        //     //弹出层数据回显
                        //     //layer.getChildFrame(selector, index) - 当前页获取iframe页的DOM（selector即iframe页的选择器）
                        //     console.log("iframe_obj",obj)
                        //     var body = layer.getChildFrame('form', index);
                        //     // body.find("#categoryId").val(obj.data.categorylevelone);
                        //     body.find("#gid").val(obj.data.gid);
                        //     body.find("#gname").val(obj.data.gname);
                        //     body.find("#producer").val(obj.data.producer);
                        //     body.find("#price").val(obj.data.price);
                        //     // body.find("#categorylevelone").val(obj.data.categorylevelone);
                        //     body.find("#lable").val(obj.data.lable);
                        //     //如果是性别的话可以选择属性选择器name和value的结合来进行回显
                        //     // body.find("input[name='gender'][value=1]").attr({'checked':obj.data.gender==1?true:false});
                        //     // body.find("input[name='gender'][value=0]").attr({'checked':obj.data.gender==0?true:false});
                        //     //下拉列表类别回显
                        //     // body.find("input[name='categorylevelone'][value="+1+"]").attr("selected",true);
                        //     // body.find("option[value='"+obj.data.categorylevelone+"']").attr("selected",true)
                        // },
                    });

                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                } else {
                    console.log("不存在")
                }
            });
        });
    </script>
</head>
<body>
<div class="layui-container">
    <!--    <img src="image/apple.jpg" alt="图片解析错误">-->
    <!--    layui-hide:通过修改列hide属性后重载表格来实现个别列的显示与隐藏。-->
    <table class="layui-hide" id="demo1" lay-filter="demo1"></table>
    <button id="addSpaces" type="button" class="layui-btn layui-btn-fluid">添加车位</button>
</div>

</body>
</html>